<template>
  <div class="ShowGoodsList">
    <!-- 1.顶部导航 -->
    <HeadBar
      title="商品页面"
      :isShowLeftIcon="true"
      @isShowComponent="closeCom"
    ></HeadBar>
    <!-- 2. 滑动到导航 -->
    <van-tabs v-model="active" swipeable @click="onClick">
      <van-tab
        :title="item.name"
        v-for="item in brotherCategory"
        :key="item.id"
      >
        <!-- 3.{{ detailId }} -->
        <goods-item
          :arr="showItemArr"
          @changePage="changePageHandler"
          @sendId="ItemId=$event"
        ></goods-item>
      </van-tab>
    </van-tabs>

    <!-- 4.展示详情 -->
    <Descripts ref="descHandle" v-if="isShowPage" class="DescClass" :ItemId="ItemId"></Descripts>
  </div>
</template>

<script>
import HeadBar from "@/components/HeadBar";
import { getCategory, getSmallData } from "@/api/classification";
import GoodsItem from "./goods-item.vue";

import Descripts from "@/views/home/components/Desc.vue";
console.log(Descripts);
export default {
  name: "ShowGoodsList",
  props: {
    detailId: {
      type: Number,
    },
  },
  data() {
    return {
      brotherCategory: [], //顶部滑块数据
      active: 0, //当前高亮的标签下标
      showItemArr: [], // 商品列表展示
      navId: 0,
      isShowPage: false, //是否展示商品详情页 购物车
      ItemId:null
    };
  },
  created() {
    this.getCategoryHandler();
    this.getSmallDataHandler({
      categoryId: this.detailId,
      size: 100,
    });
  },
  methods: {
    onClick() {
      this.navId = this.brotherCategory[this.active].id;
      this.getSmallDataHandler({
        categoryId: this.navId,
        size: 100,
      });
      console.log(this.brotherCategory[this.active].id);
    },
    // 在这里调用数据;
    changePageHandler($event) {
      this.isShowPage = $event;
    },
    //   关闭页面
    closeCom() {
      this.$emit("hideCom", false);
    },
    //  获取数据;
    async getCategoryHandler() {
      try {
        const res = await getCategory({ id: this.detailId });
        this.brotherCategory = res.data.data.brotherCategory;
        console.log(res);
      } catch (err) {
        console.log(err.message);
      }
    },
    // 获取对应的数据
    async getSmallDataHandler(params) {
      try {
        const res = await getSmallData(params);
        //   给属性赋值
        this.showItemArr = res.data.data.data;
      } catch (err) {
        console.log(err.message);
      }
    },
  },
  components: {
    HeadBar,
    GoodsItem,
    Descripts,
  },
};
</script>

<style scoped lang="scss">
.ShowGoodsList {
  // overflow-y: auto;
  background-color: #fff;
}

// =================
::v-deep .DescClass {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: #fff;
  overflow-y:auto ;
}
</style>
